<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Html Object | Raxan User Guide</title>
    <link href="../raxan/styles/master.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="../raxan/styles/master.ie.css" type="text/css"><![endif]-->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="highlight/highlight.js"></script>
    <script type="text/javascript">
        hljs.initHighlightingOnLoad('javascript','html','php');
    </script>

</head>

<body>
    <div class="container c48 prepend-top">
        <h2 class="bottom">Raxan User Guide</h2>
        <div class="navbar">
            <div class="lf"><div class="rt"><div class="md">
                <ul>
                    <li><a href="../index.html" title="The Rich Ajax, CSS &amp; PHP Framework" >Home</a></li>
                    <li><a href="table-of-contents.html" title="Blog Posts" >Table Of Contents</a></li>
                </ul>
            </div></div></div>
        </div>
        <div class="prepend1 append1"><h2>The HTML Object Quick Reference</h2>

<p>The html object provides a reference to the main Raxan Javascript object that contains the methods and properies used by the Raxan Framework.</p>

<pre><code>&lt;script src="raxan/startup.js" type="text/javascript"&gt;
    html.include('jquery');

    html.ready(function(){
        alert('The page is now ready for DOM manipulation');
    });
&lt;/script&gt;
</code></pre>

<h3>Dynamic loading of Style Sheets and Javascript Libraries</h3>

<p>At times, you only want to load a portion of your scripts and/or style sheets when the user completes a specific task. This makes it easier on the loading time required at startup and gives you the option of breaking up your very large scripts into smaller and more manageable script files.</p>

<p>Raxan provides two API functions to dynamic load of Javascript and CSS files from the within "plugins" and "styles" folders or from any other folder location.</p>

<p>To use the include() function, simply pass the name and path to the script file without the .js extension if the file is located inside the plugins folder. For example:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    html.include('myplugin');
    html.include('namespace/myplugin');
    // where namespace is a sub-folder within the plugins folder
&lt;/script&gt;    
</code></pre>

<p>For script files that are not located inside the plugins folder, use the following syntax:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    html.include('path/to/folder/myscript.js', true);
&lt;/script&gt;    
</code></pre>

<p>Note here that the extension of the file must be included and the second parameter set to true.</p>

<p>To receive notification after the file has been loaded you can pass a callback function as the third parameter:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    html.include('path/to/folder/myscript.js', true, function(){
        alert('File loaded successfully');
    });
&lt;/script&gt;    
</code></pre>

<p>When you want to dynamically load a stylesheet, the css() function must be used. The concept is similar to that of the include() function with the exception that stylesheets are loaded from the "styles" folder and there is no support for a callback function:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    html.include('master');
    html.include('name-of-theme/theme');

    // for other stylesheets
    html.include('path/to/folder/stylesheet.css', true);
&lt;/script&gt;
</code></pre>

<h3>Object Methods &amp; Properties</h3>

<table border="0" cellspacing="0" cellpadding="0" summary="HTML Object Quick Reference">
    <tbody>
        <tr class="header">
            <th class="c6" valign="top">Methods/Events</th>
            <th valign="top">Description</th>
            <th valign="top">Example</th>

        </tr>
        <tr>
            <td valign="top">version</td>
            <td valign="top">Return the version number of the framework</td>
            <td valign="top">alert(html.version);</td>
        </tr>
        <tr class="even">

            <td valign="top">path</td>
            <td valign="top">Path to framework files. This will be detected by default.</td>
            <td valign="top">
                <p>To manually set the library path use:</p>
                <p>html.path = './raxan-changes';</p>
            </td>
        </tr>

        <tr>
            <td valign="top">csspath</td>
            <td valign="top">Path to Raxan sylesheets. This will be detected by default.</td>
            <td valign="top">
                <p>To manually set the css path use:</p>
                <p>html.csspath = './mystyles';</p>
            </td>

        </tr>
        <tr class="even">
            <td valign="top">pluginpath</td>
            <td valign="top">Path to Raxan plugins. This will be detected by default.</td>
            <td valign="top">
                <p>To manually set the plugins path path use:</p>
                <p>html.pluginpath = './myplugins';</p>

            </td>
        </tr>
        <tr>
            <td valign="top">mainScript</td>
            <td valign="top">Returns the name of the main startup or code-behind script. If multiple
            startup scripts were specified then this property will return an array.</td>
            <td valign="top">alert(html.mainScript)</td>
        </tr>

        <tr>
            <td valign="top"><strong>Methods</strong></td>
            <td valign="top"> </td>
            <td valign="top"> </td>
        </tr>
        <tr class="even">
            <td valign="top">bind(css,evt,fn)</td>

            <td valign="top">
                <p>Bind the event of an html element to a function.</p>
                <ul>
                    <li>css - Element selector</li>
                    <li>evt - Name of event</li>
                    <li>fn - Callback function</li>
                </ul>

            </td>
            <td valign="top" scope="col">
                <p>html.bind(&quot;#btnsave&quot;, &quot;click&quot;, function(){<br />
                    alert(&quot;You have clicked me&quot;);<br/>
                });</p>

            </td>
        </tr>
        <tr>
            <td valign="top">css(src,extrn)</td>
            <td valign="top">
                <p>Dynamically load a stylesheet from the server.</p>
                <ul>
                    <li>src - Stylesheet URL.</li>

                    <li>extrn -  Set to true when loadig styles that are not located inside styles
                    folder.</li>
                </ul>
            </td>
            <td valign="top">html.include(&quot;master&quot;);<br />
                html.include(&quot;name-of-theme/theme&quot;);<br />

                <br />
                // for other stylesheets<br />
                html.include("path/to/folder/stylesheet.css", true);<br />
            <br /></td>
        </tr>
        <tr class="even">
            <td valign="top">include(src,extrn,fn)</td>

            <td valign="top">
                <p>Dynamically load a Javascript from the server.</p>
                <ul>
                    <li>src - Javscript URL.</li>
                    <li>extrn -  Set to true when loadig styles that are not located inside plugins
                    folder.</li>
                    <li>fn - Calback function to receive notification after the file has loaded.</li>
                </ul>

            </td>
            <td valign="top">html.include("myplugin");<br />
                html.include("namespace/myplugin");<br />
                html.include("path/to/folder/myscript.js", true);<br />
                html.include("path/to/folder/myscript.js", true, function(){<br />
                alert(&quot;File loaded successfully&quot;);<br />

                });<br />
            <br /></td>
        </tr>
        <tr>
            <td valign="top">urlparams()</td>
            <td valign="top">Returns an array containing url parameters passed to the page.</td>
            <td valign="top">var url = html.urlparams();<br />

                alert(url['name']);<br />
            <br /></td>
        </tr>
        <tr class="even">
            <td valign="top">filename()</td>
            <td valign="top">Returns the web page file<br /></td>
            <td valign="top">alert(html.filename());<br />

            <br /></td>
        </tr>
        <tr>
            <td valign="top">post(url, data)</td>
            <td valign="top">
                Post data to the server.
                <ul>
                    <li>url - URL to post data.</li>

                    <li>data - hash array containing data to be sent to the web server.</li>
                </ul>
            </td>
            <td valign="top">var data = {<br />
                name:&quot;value1&quot;,<br />
                name2: &quot;value2&quot;<br />

                }<br />
                // send data to server<br />
                html.post(&quot;save.php&quot;,data);<br />
            <br /></td>
        </tr>
        <tr class="even">

            <td valign="top">log(txt)</td>
            <td valign="top">Log text to window.console or display in status bar. The window.console
                is used if Firebug is enabled.<br />
            <br /></td>
            <td valign="top"> </td>
        </tr>
        <tr>
            <td valign="top"><strong>Events</strong></td>

            <td valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
        </tr>
        <tr class="even">
            <td valign="top">ready(fn)</td>
            <td valign="top">Bind a function to the ready event. This event is triggered when the DOM
                has be loaded and can be manipulated.<br />
            <br /></td>
            <td valign="top">html.ready(function(){<br />

                alert(&quot;The DOM is ready&quot;);<br />
            });<br /></td>
        </tr>
        <tr>
            <td valign="top">load(fn)</td>
            <td valign="top">Bind a function to the browser's onload event.</td>

            <td valign="top"> </td>
        </tr>
        <tr class="even">
            <td valign="top">unload(fn)</td>
            <td valign="top">Bind a function to the browser's unload event.</td>
            <td valign="top"> </td>
        </tr>

        <tr>
            <td valign="top">bindRemote(css, evt, val, serialize, ptarget, script, options) - Alias: $bind</td>
            <td valign="top">Used internally to bind DOM elements to server-side events</td>
            <td valign="top">$bind('.box','click')</td>
        </tr>

        <tr>
            <td valign="top">triggerRemote(target,type,val,serialize,opt) - Alias $trigger</td>
            <td valign="top">Used internally to trigger server-side events</td>
            <td valign="top">$trigger('box1','click')</td>
        </tr>

        <tr>
            <td valign="top"> </td>
            <td valign="top"> </td>
            <td valign="top"> </td>
        </tr>
    </tbody>
</table>
</div>
        <div class="tpb pad" style="text-align:right">
            <a href="table-of-contents.html" class="quiet">Back to Table of Content</a>
        </div>
    </div>
</body>

</html>

